<template>
	<view class="content" :style="{bottom:  bottom? bottom :   getIsIpx ? '150rpx': '120rpx'}" @click="handleJumpToPage">
    <img v-if="cartStatus" class="icon-image" src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/cart/icon_success0509.png">
    <img v-else class="icon-image" src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/cart/alert_icon0509.png">
    <view class="font">{{cartMessage}}</view>
    <img v-if="path" class="right_icon-image" src="https://100000063-1252208446.file.myqcloud.com/images/macallan-remvp/cart/right_icon_white.png">
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		props: {
		  cartMessage: {
		    typeof: String,
        default: "加入购物车失败",
		  },
      cartStatus:{
        typeof: Boolean,
        default: false,
      },
      bottom: {
        typeof: String,
        default:''
      },
      path: {
        typeof: String,
        default:''
      }
		},
    computed: {
      getIsIpx() {
        return this.$store.state.isIpx || getApp().globalData.isIpx;
      }
    },
		methods: {
      //  页面跳转点击
      handleJumpToPage(){
        if(this.$props.path){
          uni.navigateTo({
            url: this.$props.path
          })
        }
      }
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 750rpx;
		height: 128rpx;
		padding: 32rpx 40rpx;
		display: flex;
		align-items: center;
    justify-content: flex-start;
		position:fixed;
		bottom: 120rpx;
		left: 0;
		box-sizing: border-box;
		background-color: #1A1A1A;
		z-index: 999999;
		.icon-image{
			width: 32rpx;
			height: 32rpx;
      flex-shrink: 0;
      margin-left: 16rpx;
		}
		.font{
			font-family:FrankNew-Regular,NotoSansSC-Regular;
			font-size: 28rpx;
			font-weight: 500;
			line-height: 48rpx;
			color: #FFFFFF;
			margin-left: 20rpx;
      width: 542rpx;
      text-align: left;
      white-space: nowrap; /* 防止文本换行 */
      overflow: hidden; /* 隐藏超出容器的部分 */
      text-overflow: ellipsis; /* 用省略号表示被裁剪的文本 */
		}
    .right_icon-image{
      width: 64rpx;
      height: 64rpx;
      flex-shrink: 0;
    }
	}
</style>
